<template>
  <div>
    <Avatar />
    <h2>首页</h2>
    <div>reactive函数:{{ count }}</div>
    <div>ref使用{{ nowNum }}</div>
    <div>computed使用：{{ result }}</div>
    <div>computed文件调用：{{ computedReslut }}</div>
    <div>
      <button @click="add">+1</button>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, computed, watch, watchEffect } from 'vue'
import { computedTotal } from '@/utils/common'
const data = reactive({
  count: 1,
  current: 2
})
const nowNum = ref(1)
const result = computed(() => nowNum.value + data.count)


function add() {
  data.current += 1
}
const computedReslut = computedTotal(data)

const { count } = toRefs(data)
</script>

<style lang="scss" scoped>

</style>